<template>
  <div>
    <a-layout id="components-layout-demo-fixed-sider" style="min-height: 100vh">
      <f-sider></f-sider>
      <a-layout>
        <f-header></f-header>
        <a-layout-content :style="{ margin: '24px 16px 0', overflow: 'initial' }">
          <div :style="{ padding: '24px', background: '#fff', textAlign: 'center' }">
            <a-row type="flex" align="middle">
              <a-col class="soft_mr20">应用搜索</a-col>
              <a-col>
                <a-input-search placeholder="search" style="width: 200px" @search="onSearch"/>
              </a-col>
            </a-row>
            <a-row type="flex" align="middle" class="soft_mt20">
              <a-col class="soft_mr20">应用分类</a-col>
              <a-col>
                <a-col>
                  <a-button type="primary" class="soft_mr20">全部</a-button>
                </a-col>
              </a-col>
            </a-row>
            <a-row class="soft_mt20">
              <a-table :columns="columns" :dataSource="data" :rowKey="data.id">
                <!-- <template slot="price" slot-scope="text">
                  <span>免费</span>
                </template>
                <template slot="state" slot-scope="text">
                  <span>未开通</span>
                </template> -->
              </a-table>
            </a-row>
          </div>
        </a-layout-content>
        <f-footer></f-footer>
      </a-layout>
    </a-layout>
  </div>
</template>
<style>
.soft_mt20 {
  margin-top: 20px;
}
.soft_mr20 {
  margin-right: 20px;
}
#components-layout-demo-fixed-sider .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
</style>
<script>
import sider from "../../components/layout/Sider.vue";
import header from "../../components/layout/Header.vue";
import footer from "../../components/layout/Footer.vue";
const columns = [
  {
    title: "软件名称",
    dataIndex: "appname"
  },
  {
    title: "开发商",
    dataIndex: "developers"
  },
  {
    title: "说明",
    dataIndex: "appexplain"
  },
  {
    title: "价格",
    dataIndex: "price",
    scopedSlots: { customRender: "price" }
  },
  {
    title: "状态",
    dataIndex: "state",
    scopedSlots: { customRender: "state" }
  }
];

const data = [
  {
    appname: "",
    developers: "",
    explain: "",
    price: "",
    expires: "",
    state: "",
    operation: ""
  }
];
export default {
  components: {
    "f-header": header,
    "f-sider": sider,
    "f-footer": footer
  },
  data() {
    return {
      data,
      columns,
      visible: false,
      token: localStorage.getItem("token")
    };
  },
  mounted() {
    this.getsoft();
    this.setsiders();
  },
  methods: {
    gogoods() {
      this.$router.push("/goods");
    },
    goorder() {
      this.$router.push("/order");
    },
    gobanner() {
      this.$router.push("/banner");
    },
    gouser() {
      this.$router.push("/user");
    },
    onSearch(value) {
      var token = this.token;
      this.postAxios("/Admin/Soft/searchSoft", {
        appname: value,
        token: token
      }).then(res => {
        this.data = res.data;
      });
    },
    getsoft() {
      var token = this.token;
      this.getAxios("/Admin/Soft/getSoft", {
        token: token
      }).then(res => {
        this.data = res.data;
      });
    },
    setsiders() {
      this.$store.commit("updateselectedKeys", "12");
    }
  }
};
</script>
